<template>
  <div>
   <MyHeader
   title="TabBar案例"
   bgc= "pink"
   >   
   </MyHeader>
   <div class="main">
     <component :is="comName"></component>
   </div>
   <MyTabBar :arr="tabList"
   @changeCom="changeFn">  </MyTabBar>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue"
import MyTabBar from "./components/MyTabBar.vue"
import MyGoodsList from "./views/MyGoodsList.vue"
import MyGoodsSearch from "./views/MyGoodsSearch.vue"
import MyUserInfo from "./views/MyUserInfo.vue"
export default {
  data(){
return{
  comName:MyGoodsList,
  tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
}
  },
components:{
  MyHeader,
  MyTabBar,
  MyGoodsList,
  MyGoodsSearch,
  MyUserInfo
},
// 接收子组件传过来的组件名字 把页面上的组件名替换
methods:{
  changeFn(Name){
this.comName=Name
  }
}
}
</script>

<style scope>
.main{
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>